<template>
  <wd-popup v-model="showPopup"
            closable
            :close-on-click-modal="false"
            modal-style="opacity:0.2"
            custom-style="width:30vw;height:42vh;min-width:22rem;border-radius:5px;"
            custom-class="setting-popup">
    <text class="custom-title">设置</text>
    <wd-tabbar v-model="tabNum" custom-class="popup-tabbar" @change="(e)=>{ tabNum = e.value }">
      <wd-tabbar-item title="修改密码"/>
      <wd-tabbar-item title="主题颜色" />
    </wd-tabbar>

    <!--修改密码-->
    <view class="update-password" v-if="tabNum == 0">
      <wd-form ref="formRef" :model="formModel">
        <wd-cell-group>
          <wd-input
            label="原密码"
            label-width="100px"
            clearable
            v-model="formModel.oldPassword"
            placeholder="请输入用户名"
          />
          <wd-input
            label="新密码"
            label-width="100px"
            clearable
            v-model="formModel.password"
            placeholder="请输入密码"
          />
          <wd-input
            label="确认新密码"
            label-width="100px"
            clearable
            v-model="formModel.confirmPassword"
            placeholder="请输入确认密码"
          />
        </wd-cell-group>
        <wd-button class="form-button" size="large" block @click="formSubmit">提交</wd-button>
      </wd-form>
    </view>

    <!--主题颜色-->
    <view class="theme-content" v-if="tabNum == 1">
      <wd-tag 
        custom-class="space" 
        v-for="(value, key) in themeMap" 
        :key="key"
        :bg-color="key" 
        :data-color="key" 
        @click="setTheme"
      ></wd-tag>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import httpRequest from "@/utils/request";
import { ref, reactive, defineExpose } from "vue";
import { useUserStore } from "@/store";
import { themeMap, setSysTheme, _themeColorKey } from "@/style/theme";

// 使用 store
const userStore = useUserStore();
const showPopup = ref(false);
const tabNum = ref<number>(0)

const open = () => {
  showPopup.value = true; 
}

const formRef = ref();

// 修改密码表单数据
const formModel = reactive({
  oldPassword: '',
  password: '',
  confirmPassword: ''
})

const checkParams = (): boolean => {
  if (!formModel.oldPassword) {
    uni.showToast({ title: "请输入原密码", icon: "none" });
    return false;
  }
  if (!formModel.password) {
    uni.showToast({ title: "请输入新密码", icon: "none" });
    return false;
  }
  if (formModel.password === formModel.oldPassword) {
    uni.showToast({ title: "新密码不能与原密码相同", icon: "none" });
    return false;
  }
  if (!formModel.confirmPassword) {
    uni.showToast({ title: "请输入确认密码", icon: "none" });
    return false;
  }
  if (formModel.confirmPassword !== formModel.password) {
    uni.showToast({ title: "两次输入的密码不一致", icon: "none" });
    return false;
  }
  return true;
}

const formSubmit = async () => {
  // const { valid, errors } = await formRef.value.validate();
  if (checkParams()) {
    let params = { ...formModel, username: userStore.userInfo?.username }
    httpRequest({
      url: '/atcp-user/update-password',
      method: 'POST',
      data: params
    }).then(res=>{
      if (res.code == '00') {
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
        showPopup.value = false;
      }
      else {
        uni.showToast({
          title: "修改失败",
          icon: "error",
        });
        console.error(res.message);
      }
    })
  }
}

// 设置主题色
const setTheme = (event: Event) => {
  const target = event.target as HTMLElement;
  const bgColor = target.dataset.color;
  if (bgColor) {
    setSysTheme(bgColor);
    uni.showToast({ title: "主题已切换", icon: "success" });
  }
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.setting-popup {
  .custom-title {
    color: var(--font-color);;
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
    text-indent: 1rem;
    font-size: 1.2rem;
    background: var(--theme-color);
  }
  .update-password {
    .form-button {
      width: 250rpx;
      margin: 20rpx auto 0;
      background: var(--theme-color);
   }
  }
  .theme-content {
    padding: 18rpx;
    .space {
      border-color: #ccc !important;
      border: 1px solid;
      width: 2.4rem;
      height: 2rem;
      margin: 0 0.5rem 0.5rem;
    }
  }
}
:deep(.wd-popup > .wd-popup__close) {
  color: var(--font-color) !important;
}
:deep(.popup-tabbar) {
  border-bottom: 1px solid #e5e5e5;
  span {
    font-size: 1rem!important;
  }
}
</style>